<template>
  <div>
    <router-view class="wrap-div"/>
    <!--tab bar-->
    <div class="tab-bar">
      <router-link to="/index/home">
        <div><i class="iconfont">&#xe607;</i></div>
        <div>首页</div>
      </router-link>
      <router-link to="/index/order">
        <div><i class="iconfont">&#xe645;</i></div>
        <div>订单</div>
      </router-link>
      <router-link to="/index/person">
        <div><i class="iconfont">&#xe60d;</i></div>
        <div>我的</div>
      </router-link>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tabList: [
        {
          title: '首页',
          index: '/index/home',
          icon: 'icon-shouye'
        },
        {
          title: '订单',
          index: '/index/order',
          icon: 'icon-dingdan'
        },
        {
          title: '我的',
          index: '/index/person',
          icon: 'icon-wode'
        }
      ]
    }
  },
  watch: {
    $route (val) {
      console.log(val)
    }
  },
  mounted () {
    let that = this
    var first = null
    mui.init({
      keyEventBind: {
        backbutton: true  //关闭back按键监听
      }
    })
    mui.back = function () {
      if (
        that.$route.name === 'zulin' ||
        that.$route.name === 'order' ||
        that.$route.name === 'person'
      ) {
        if (!first) {
          first = new Date().getTime()
          mui.toast('再按一次退出应用')
          setTimeout(function () {
            first = null
          }, 1000)
        } else {
          if (new Date().getTime() - first < 1000) {
            plus.runtime.quit()
          }
        }
      }
      error
    }
  }
}
</script>
<style scoped>
  .tab-bar{
    display: flex;
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    z-index: 10;
    width: 100%;
    left: 0;
    right: 0;
    /*height: 1.6rem;*/
    font-size: 0.5rem;
    background: #fff;
    padding-top: 0.15rem;
    padding-bottom: 0.15rem;
  }
  .router-link-active{
    color: #e94975;
  }
  .wrap-div{
    box-sizing: border-box;
    width: 100%;
  }
  a div{
    text-align: center;
  }
</style>
